<template>
  <div class="commentary" v-if="commentList">
    <div class="marvellous" v-if="commentList.hotComments.length>0">
      <p>精彩评论</p>
    </div>
    <div class="marvellousList" v-for="(item,index) in commentList.hotComments" :key="item.userId">
      <div class="headImg">
        <img :src="item.user.avatarUrl" alt />
      </div>
      <div class="content">
        <div class="contentTitle">
          <div class="content_name">
            <p>{{item.user.nickname}}</p>
            <span>{{mydate(item.time)}}</span>
          </div>
          <div class="zan">
            <span v-if="item.likedCount>0">{{item.likedCount}}</span>
            <i
              class="iconfont icon-dianzan"
              @click="gives2(item.commentId,index)"
              :class="{'active':item.liked}"
            ></i>
          </div>
        </div>
        <div class="contentText">
          <p>{{item.content}}</p>
        </div>
      </div>
    </div>

    <template v-if="commentList">
      <div class="marvellous">
        <p>
          最新评论
          <span>{{commentList.total}}</span>
        </p>
      </div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :error.sync="error"
        error-text="点击加载更多"
      >
        <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->

        <ul>
          <li class="marvellousList" v-for="(item,idx) in commentList.comments" :key="item.userId">
            <div class="headImg">
              <img :src="item.user.avatarUrl" alt />
            </div>
            <div class="content">
              <div class="contentTitle">
                <div class="content_name">
                  <p>{{item.user.nickname}}</p>
                  <span>{{mydate(item.time)}}</span>
                </div>
                <div class="zan">
                  <span>{{item.likedCount}}</span>
                  <i
                    class="iconfont icon-dianzan"
                    :class="{'active':item.liked}"
                    @click="gives(item.commentId,idx)"
                  ></i>
                </div>
              </div>
              <div class="contentText">
                <p>{{item.content}}</p>
              </div>
            </div>
          </li>
        </ul>
      </van-list>
    </template>
  </div>
</template>

<script>
import util from "@/assets/js/util.js";

export default {
  components: {},
  props: [],
  data() {
    return {
      commentList: "",
      busy: false,
      loading: false,
      finished: false,
      error: false,
      num: 1
    };
  },
  watch: {},
  computed: {},
  methods: {
    mydate: util.transformDate2,
    onLoad() {
      let newN = ++this.num * 20;
      this.loading = true;
      this.$http("/comment/mv", {
        params: {
          id: this.$route.params.id,
          limit: newN
        }
      }).then(res => {
        console.log(res);
        this.loading = false;
        this.error = true;
        if (newN >= res.data.total) {
          this.error = false;
          this.finished = true;
        }
        this.commentList = res.data;
      });
    },
    // 给最新评论点赞
    gives(cid, index) {
      console.log(this.commentList.comments[index].liked);
      if (!this.commentList.comments[index].liked) {
        this.$http("/comment/like", {
          params: {
            id: this.$route.params.id,
            cid: cid,
            t: 1,
            type: 1
          }
        }).then(res => {
          this.commentList.comments[index].liked = true;
          this.commentList.comments[index].likedCount += 1;

          // console.log(this.commentList.comments);
          console.log(res);
        });
      } else {
        this.$http("/comment/like", {
          params: {
            id: this.$route.params.id,
            cid: cid,
            t: 0,
            type: 1
          }
        }).then(res => {
          this.commentList.comments[index].liked = false;
          this.commentList.comments[index].likedCount -= 1;

          // console.log(this.commentList.comments);
          console.log(res);
        });
      }
    },
    // 给精彩评论点赞
    gives2(cid, index) {
      console.log(this.commentList.comments[index].liked);

      if (!this.commentList.hotComments[index].liked) {
        this.$http("/comment/like", {
          params: {
            id: this.$route.params.id,
            cid: cid,
            t: 1,
            type: 1
          }
        }).then(res => {
          this.commentList.hotComments[index].liked = true;
          this.commentList.hotComments[index].likedCount += 1;
          // console.log(this.commentList.comments);
          console.log(res);
        });
      } else {
        this.$http("/comment/like", {
          params: {
            id: this.$route.params.id,
            cid: cid,
            t: 0,
            type: 1
          }
        }).then(res => {
          this.commentList.hotComments[index].liked = false;
          this.commentList.hotComments[index].likedCount -= 1;
          // console.log(this.commentList.comments);
          console.log(res);
        });
      }
    }
  },
  created() {
    this.$http("/comment/mv", {
      params: {
        id: this.$route.params.id,
        limit: this.num * 20
      }
    }).then(res => {
      // console.log(res);
      // res.data.comments.forEach(val=>{
      //   val.isType = false;
      // });
      this.commentList = res.data;
      console.log(this.commentList);
    });
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/common.scss";
.commentary {
  padding: vw(10) 0 vw(60) vw(10);
  .marvellous {
    width: 100%;
    padding-top: vw(10);
    p {
      font-size: vw(14);
      font-weight: bold;
      span {
        font-size: vw(12);
        color: #777;
        padding-left: vw(6);
      }
    }
  }
  .marvellousList {
    width: 100%;
    display: flex;
    align-items: flex-start;
    padding: vw(10) 0;
    border-bottom: vw(1) solid #ccc;
    .headImg {
      width: vw(30);
      height: vw(28);
      border-radius: 50%;
      overflow: hidden;
      margin: vw(6) vw(10) 0 0;
      img {
        height: 100%;
      }
    }
    .content {
      width: 100%;
      .contentTitle {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .content_name {
          p {
            font-size: vw(14);
            color: #111;
          }
          span {
            font-size: vw(12);
            color: #777;
          }
        }
        .zan {
          display: flex;
          align-items: center;
          padding-right: vw(10);
          span {
            font-size: vw(14);
            color: #777;
          }
          i {
            font-size: vw(16);
            color: #777;
            padding-left: vw(6);
          }
          .active {
            color: red;
          }
        }
      }
      .contentText {
        padding-top: vw(10);
        padding-right: vw(10);
        // border-bottom: vw(1) solid #ccc;
        p {
          font-size: vw(14);
          color: #000;
        }
      }
    }
  }
}
</style>